<template>
  <div class="container">
    <h1 class="topTitle">折线</h1>
    <div style="height: 600px; width: 100%">
      <l-map class="map" ref="map" :options="mapOptions" @ready="doSomethingOnReady()">

        <l-tile-layer :url="mapOptions.url"></l-tile-layer>
        <l-polyline :lat-lngs="polyline.latlngs" :color="polyline.color"></l-polyline>
        <l-control-zoom position="topleft" zoom-in-title="放大" zoom-out-title="缩小"></l-control-zoom>
      </l-map>
    </div>
  </div>
</template>

<script>

  /**http://geojson.io/**/
  export default {
  name: "PolylinePage",
  components: {
  },
  data() {
    return {
      map:null,
      //地图参数
      mapOptions:{
        attributionControl :false,
        zoomControl:false,
        minZoom: 2,
        maxZoom: 14,
        zoom: 6,
        center: {'lon':116.404,'lat':39.915},
        preferCanvas: true,
        url: 'http://webrd01.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=7&x={x}&y={y}&z={z}',
        attribution:  '&copy; WebGis',
      },
      polyline: {
        latlngs: [[41.423421445798894, 114.54345703125001], [41.192348026232075, 116.87255859375001], [40.05836611171505,  114.63134765625001], [39.99106237125379,   118.41064453125001]],
        color: 'blue'
      }
    }
  },
  methods: {
    doSomethingOnReady() {
      this.map = this.$refs.map.mapObject
    },
  },
}
</script>

<style lang="stylus" scoped>
.container
  width: 100%
  h1.topTitle
    text-align: center
</style>